웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트의 폰트를 원하는 폰트로 직접 선택하여 결정할 수 있습니다. 폰트의 사용시 사용가능한 속성은 font-family를 통해 폰트를 선택하여 출력할 수 있습니다. 폰트 지정은 html 또는 body 태그, 즉 제일 상위의 태그에 선언을 꼭 해두어야합니다. 그 이유는 브라우저마다 Default 값의 폰트가 다르기 때문에 다른 스타일의 폰트가 사용되는 것을 방지하기 위함입니다. 간단한 사용방법은 아래와 같습니다.
.test { font-family: 폰트이름; }
! 폰트에 대한 기본정보
; 폰트 지정은 아래와 같이 두 가지 타입으로 지정이 가능합니다.
a. 폰트명(family name) : 굴림, 궁서, arial, helvetica, verdana 등
b. 폰트집합(generic family) : 폰트집합은 비슷한 글꼴타입의 지정을 의미합니다.
- 고딕체 sans-serif(가장 많이 쓰임), 바탕체 serif, 필기체 cursive
아래는 폰트 타입의 지정에 대한 방법입니다.
!! 폰트사용 에제 소스보기
<p>폰트를 변경하여 적용할 경우</p>
<style type="text/css">
p { font-family: 돋움, dotum, 굴림, gulim; }
</style>
예제에 대한 설명은 p 태그에 적용된 폰트를 변경하기 위한 방법입니다... 우선 폰트의 적용은 제일 앞에 있는 속성값부터 적용됩니다. 즉 돋움폰트가 우선순위를 가지며 이를 적용할 수 없는 경우(폰트가 없거나 OS, 브라우저 지원불가인 경우) 다음 지정된 폰트로 계속해 넘어갑니다.
dotum
굴림
gulim
....
..
.
그리고 만약 폰트 이름 사이에 공백이 있는 경우 따옴표가 반드시 필요합니다. 예를들어 폰트명이 thin gothic인 경우 중간에 띄어쓰기가 있으므로 콤마(")를 사용하여 font-family: "thin gothic"으로 표기해야 합니다.
( X ) font-family: "thingothic"
( O ) font-family: "thin gothic"
아래의 글도 찾고 계시지 않나요?
